<template>
	<view class="addbook">
		<u-navbar left-icon-color="#fff" :placeholder="true" :bgColor="bgColor" :autoBack="true">
			<view class="navtitle" slot="center">通讯录</view>
		</u-navbar>

		<view class="cont-input">
			<u-input placeholder="请输入对方名字或备注" @input="input" @confirm="confirm"
				customStyle="background-color: #232526; padding: 20rpx;" prefixIconStyle="color: #fff;"
				prefixIcon="search" color="#fff" border="none" v-model="value">
			</u-input>
		</view>

		<view class="fun-list" @click="gourl('/pages/chat/requestlist/index')">
			<view class="fun-left">
				<u-image :showLoading="true" radius="10" src="/static/chat/fun1.png" loadingIcon="/static/chat/fun1.png"
					errorIcon="/static/chat/fun1.png" width="50px" height="50px">
				</u-image>
				<view :class="{'newuserhot' : isHot}"></view>
			</view>
			<view class="fun-right">新的朋友</view>
		</view>

		<view class="fun-list" style="margin-top: 30rpx;" @click="gourl('/pages/chat/mygroup/index')">
			<view class="fun-left">
				<u-image :showLoading="true" radius="10" src="/static/chat/fun2.png" loadingIcon="/static/chat/fun2.png"
					errorIcon="/static/chat/fun2.png" width="50px" height="50px">
				</u-image>
			</view>
			<view class="fun-right">我的群聊</view>
		</view>

		<view class="search-box" v-if="searchshow">
			<view class="search-if" v-if="searchlist.length > 0">
				<view class="search-list" v-for="(item, index) in searchlist" @click="gochat(item)" :key="index">
					<view class="search-left">
						<u-image :showLoading="true" radius="10" :src="item.u_img" loadingIcon="/static/chat/logo.png"
							errorIcon="/static/chat/logo.png" width="50px" height="50px">
						</u-image>
					</view>
					<view class="search-right" v-if="item.break">{{item.break}}</view>
					<view class="search-right" v-else>{{item.user}}</view>
				</view>
			</view>
			<view class="search-if" v-else>
				<u-empty mode="search" :marginTop="30" icon="http://cdn.uviewui.com/uview/empty/search.png">
				</u-empty>
			</view>
		</view>

		<view class="index-list" v-if="!searchshow">
			<u-index-list :index-list="indexList" :sticky="false" @select="select">
				<view v-for="(item, index) in list" :key="index">
					<u-index-item v-if="item.length > 0">
						<u-index-anchor v-if="index" color="#fff" :text="index"
							bgColor="rgba(0,0,0,0.0)"></u-index-anchor>
						<view class="anchor-list"
							v-for="(i, x) in item" :key="x">
							<view class="anchor-left" @click="gochat(i)">
								<u-image :showLoading="true" radius="10" :src="i.u_img"
									loadingIcon="/static/chat/logo.png" errorIcon="/static/chat/logo.png" width="50px"
									height="50px">
								</u-image>
							</view>
							<view class="anchor-right" @click="gochat(i)">{{i.break || i.user}}</view>
						</view>
					</u-index-item>
				</view>
			</u-index-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: 'rgba(0,0,0,0.0)',
				value: '',
				indexList: [],
				userinfo: {},
				list: [],
				searchlist: [],
				searchshow: false,
				isHot: false
			};
		},
		onShow() {
			this.userinfo = uni.getStorageSync('info');
			this.postnewuser();
			this.userlist();
		},
		methods: {
			postnewuser() {
				this.$Request({
					method: 'POST',
					url: '/api/rong/getBeVerified',
					data: {
						use_id: this.userinfo.member_id
					}
				}).then(res => {
					if (res.code === 1) {
						this.isHot = res.data.some(e => e.status === 0);
					}
				});
			},
			gochat(item) {
				let name = ''
				if(item.break != null && item.break != ""){
					name = item.break
				}else{
					name = item.user
				}
				uni.navigateTo({
					url: `/pages/chat/chitchat/index?id=${item.member_id}&name=${name}`
				});
				
			},
			confirm() {
				this.searchshow = true;
				this.searchlist = this.list.flat().filter(item =>
					item.break.includes(this.value) || item.user.includes(this.value)
				);
			},
			input(e) {
				this.searchshow = e !== '';
			},
			select(e) {
				console.log(e);
			},
			gourl(url) {
				uni.navigateTo({
					url
				});
			},
			userlist() {
				this.$Request({
					method: 'POST',
					url: '/api/rong/userFriendsList',
					data: {
						use_id: this.userinfo.member_id
					}
				}).then(res => {
					if (res.code === 1) {
						this.list = res.data;
						this.indexList = Object.keys(this.list);
					}
				});
			}
		}
	};
</script>

<style>
	page {
		background-color: #17191A;
	}
</style>
<style scoped lang="scss">
	.addbook {
		.navtitle {
			color: #fff;
		}

		.cont-input {
			padding: 30rpx 20rpx;
		}

		.fun-list {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			margin-bottom: 30rpx;

			.fun-left {
				width: 18%;
				position: relative;

				.newuserhot {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					position: absolute;
					z-index: 9;
					top: 2rpx;
					right: 35rpx;
					background-color: red;
				}
			}

			.fun-right {
				width: 82%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #fff;
				font-size: 28rpx;
			}
		}

		.search-box {
			padding: 0 30rpx;

			.search-if {
				border-top: 1rpx solid rgba(255, 255, 255, 0.2);
				margin-top: 30rpx;

				.search-list {
					display: flex;
					align-items: center;
					padding-top: 30rpx;

					.search-left {
						width: 18%;
					}

					.search-right {
						width: 50%;
						color: #fff;
						font-size: 28rpx;
					}
				}
			}
		}

		.index-list {
			padding: 0 30rpx;

			.anchor-list {
				display: flex;
				align-items: center;
				padding: 30rpx 0;
				.anchor-left {
					width: 18%;
				}

				.anchor-right {
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #fff;
					font-size: 28rpx;
				}
			}
		}
	}
</style>